<template>
  <div class="max-w-6xl mx-auto p-6">
    <!-- 导航栏 -->
    <div class="bg-white rounded-lg shadow-lg mb-6">
      <nav class="flex flex-wrap border-b border-gray-200 overflow-x-auto">
        <button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
          'flex-1 min-w-0 py-3 px-2 sm:py-4 sm:px-4 md:px-6 text-center font-medium transition-colors duration-200 text-sm sm:text-base whitespace-nowrap flex items-center justify-center space-x-1 sm:space-x-2',
          activeTab === tab.id
            ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
            : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
        ]">
          <span>{{ tab.icon }}</span>
          <span class="block sm:hidden">{{ tab.name.length > 4 ? tab.name.substring(0, 4) + '...' : tab.name }}</span>
          <span class="hidden sm:block">{{ tab.name }}</span>
        </button>
      </nav>
    </div>

    <!-- Tab内容 -->
    <!-- 课件资料 Tab -->
    <div v-if="activeTab === 'materials'">
      <MaterialsTab :chapterPath="'/chap05/materials'" :chapterNumber="5" :materials="materialsConfig"
        :showChapterHighlights="true" />
    </div>

    <!-- 视频内容 Tab -->
    <div v-if="activeTab === 'videos'" class="bg-white rounded-lg shadow-lg">
      <VideosTab 
        :title="videosConfig.title"
        :mainVideos="videosConfig.mainVideos"
        :videoList="videosConfig.videoList"
      />
    </div>

    <!-- 示例内容 Tab -->
    <div v-if="activeTab === 'examples'" class="bg-white rounded-lg shadow-lg">
      <ExamplesGrid :examples="examples" :chapterName="'examples'" />
    </div>

    <!-- 实践课堂 Tab -->
    <PracticeTab v-if="activeTab === 'practice'" />

    <!-- 作业与任务 Tab -->
    <AssignmentTab v-if="activeTab === 'assignments'" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ExamplesGrid from '@/components/ExamplesGrid.vue'
import MaterialsTab from '@/components/MaterialsTab.vue'
import VideosTab from '@/components/VideosTab.vue'
import PracticeTab from '@/components/PracticeTab.vue'
import AssignmentTab from '@/components/AssignmentTab.vue'
import { processVideosUrls } from '@/utils/videoUtils'

interface Example {
  id: string
  title: string
  description: string
  type: string
  difficulty: 'easy' | 'medium' | 'hard'
  fileName: string
  filePath: string
}

const router = useRouter()
const route = useRoute()

// Tab 相关状态
const activeTab = ref('materials')

// 开始实践方法
const startPractice = () => {
  // 可以在这里添加开始实践的逻辑，比如打开编辑器或跳转到实践页面
  alert('准备开始实践！请按照指南步骤进行操作。')
}
const tabs = [
  { id: 'materials', name: '课件资料', icon: '📚' },
  { id: 'videos', name: '视频内容', icon: '🎬' },
  { id: 'examples', name: '示例内容', icon: '💻' },
  { id: 'practice', name: '实践课堂', icon: '🎨' },
  { id: 'assignments', name: '作业与任务', icon: '📝' }
]

// 课件资料配置
const materialsConfig = [
  {
    type: 'pdf',
    title: '本章课件',
    description: 'Vue事件处理相关课件',
    icon: 'red',
    files: ['/第5章-事件处理.pdf']
  },
  {
    type: 'docx',
    title: '本章讲义',
    description: 'Vue事件处理详细讲义',
    icon: 'green',
    files: ['/第5章-Vue事件处理.docx']
  }
]

// 视频配置
// 第5章视频数据
const chapter5MainVideos = ref(processVideosUrls([
  {
    id: 'chap5-main1',
    title: '5.1 Vue事件处理基础',
    url: '/chap05/videos/5.1Vue事件处理基本语法.mp4',
    description: 'Vue事件处理基础概念和语法'
  },
  {
    id: 'chap5-main2',
    title: '5.2 Vue事件处理函数',
    url: '/chap05/videos/5.2Vue事件处理函数.mp4',
    description: 'Vue事件处理函数的定义和使用'
  }
]))

const chapter5VideoList = ref(processVideosUrls([
  {
    id: 'chap5-1',
    title: 'Vue事件处理基础',
    description: 'Vue事件处理基本使用',
    duration: '15:30',
    views: '1.2k',
    url: '/chap05/videos/5.1Vue事件处理基本语法.mp4'
  },
  {
    id: 'chap5-2',
    title: 'Vue事件处理函数',
    description: 'Vue事件处理函数详解',
    duration: '18:45',
    views: '980',
    url: '/chap05/videos/5.2Vue事件处理函数.mp4'
  }
]))

const videosConfig = {
  title: '第5章 Vue事件处理视频教程',
  mainVideos: chapter5MainVideos.value,
  videoList: chapter5VideoList.value
}

const examples = ref<Example[]>([
  // 第1学时 - DOM基础
  {
    id: '1-1.2',
    title: 'DOM树结构示例',
    description: '演示HTML文档的DOM树结构，理解元素的层级关系 [第1学时]',
    type: 'DOM基础',
    difficulty: 'easy',
    fileName: '1.2.html',
    filePath: '/chap05/1/1.2.html'
  },
  {
    id: '1-21',
    title: '事件冒泡演示',
    description: '展示事件冒泡机制，理解事件在DOM树中的传播过程 [第1学时]',
    type: '事件处理',
    difficulty: 'easy',
    fileName: '2.1.html',
    filePath: '/chap05/1/2.1.html'
  },
  {
    id: '1-3.1',
    title: 'Vue事件处理基本语法',
    description: '学习基本的事件处理语法 [第1学时]',
    type: '事件处理语法',
    difficulty: 'easy',
    fileName: '3.1.html',
    filePath: '/chap05/1/3.1.html'
  },
  {
    id: '1-3.2',
    title: 'Vue事件冒泡和阻止',
    description: '学习基本的Vue事件冒泡和阻止 [第1学时]',
    type: '事件修饰符',
    difficulty: 'easy',
    fileName: '3.2.html',
    filePath: '/chap05/1/3.2.html'
  },
  {
    id: '1-3.3',
    title: 'Vue事件对象使用',
    description: '演示Vue组合式API中事件对象的使用，获取鼠标位置和事件类型 [第1学时]',
    type: '事件对象',
    difficulty: 'easy',
    fileName: '3.3.html',
    filePath: '/chap05/1/3.3.html'
  },

  // 第2学时 - Vue事件处理
  {
    id: '2-1.1',
    title: '内联事件处理器',
    description: 'Vue.js中的内联事件处理器使用方法，包含计数器和用户信息示例 [第2学时]',
    type: 'Vue事件',
    difficulty: 'easy',
    fileName: '1.1.html',
    filePath: '/chap05/2/1.1.html'
  },
  {
    id: '2-1.2',
    title: '方法事件处理器',
    description: '学习Vue.js中定义和使用方法事件处理器 [第2学时]',
    type: 'Vue事件',
    difficulty: 'easy',
    fileName: '1.2.html',
    filePath: '/chap05/2/1.2.html'
  },
  {
    id: '2-1.3',
    title: '事件参数传递',
    description: '掌握在Vue事件处理中传递参数的技巧 [第2学时]',
    type: 'Vue事件',
    difficulty: 'easy',
    fileName: '1.3.html',
    filePath: '/chap05/2/1.3.html'
  },
  {
    id: '2-2.1',
    title: '事件对象详解',
    description: '深入理解事件对象的属性和方法，包含鼠标事件追踪示例 [第2学时]',
    type: '事件对象',
    difficulty: 'medium',
    fileName: '2.1.html',
    filePath: '/chap05/2/2.1.html'
  },
  {
    id: '2-2.2',
    title: '混合参数传递示例',
    description: '学习在事件处理中传递多个参数，包含事件对象和自定义参数的混合使用 [第2学时]',
    type: '参数传递',
    difficulty: 'medium',
    fileName: '2.2.html',
    filePath: '/chap05/2/2.2.html'
  },
  {
    id: '2-3.1',
    title: '返回值控制示例',
    description: '学习事件处理函数的返回值控制，包括表单验证、链接跳转和右键菜单控制 [第2学时]',
    type: '返回值控制',
    difficulty: 'medium',
    fileName: '3.1.html',
    filePath: '/chap05/2/3.1.html'
  },

  // 第3学时 - 事件修饰符
  {
    id: '3-1.1',
    title: 'stop修饰符演示',
    description: '学习使用.stop修饰符阻止事件冒泡，包含可视化演示 [第3学时]',
    type: '事件修饰符',
    difficulty: 'medium',
    fileName: '1.1.html',
    filePath: '/chap05/3/1.1.html'
  },
  {
    id: '3-1.2',
    title: 'prevent修饰符',
    description: '掌握.prevent修饰符阻止默认行为的使用 [第3学时]',
    type: '事件修饰符',
    difficulty: 'medium',
    fileName: '1.2.html',
    filePath: '/chap05/3/1.2.html'
  },
  {
    id: '3-1.3',
    title: '按键修饰符',
    description: '学习键盘事件的按键修饰符使用方法 [第3学时]',
    type: '按键修饰符',
    difficulty: 'medium',
    fileName: '1.3.html',
    filePath: '/chap05/3/1.3.html'
  },
  {
    id: '3-2.1',
    title: '系统修饰符',
    description: '掌握Ctrl、Alt、Shift等系统修饰符的使用 [第3学时]',
    type: '系统修饰符',
    difficulty: 'medium',
    fileName: '2.1.html',
    filePath: '/chap05/3/2.1.html'
  },
  {
    id: '3-3.1',
    title: '鼠标按钮修饰符',
    description: '学习鼠标左键、右键、中键修饰符的使用 [第3学时]',
    type: '鼠标修饰符',
    difficulty: 'medium',
    fileName: '3.1.html',
    filePath: '/chap05/3/3.1.html'
  },

  // 第4学时 - 综合应用
  {
    id: '4-1',
    title: '智能表单验证器',
    description: '综合运用事件处理和修饰符创建智能表单验证系统 [第4学时]',
    type: '综合应用',
    difficulty: 'hard',
    fileName: '1.html',
    filePath: '/chap05/4/1.html'
  }
])

// 处理路由参数以激活指定标签页
const handleRouteParams = () => {
  const tabParam = route.query.tab
  if (typeof tabParam === 'string' && tabs.some(tab => tab.id === tabParam)) {
    activeTab.value = tabParam
  }
}

// 监听路由查询参数变化
watch(
  () => route.query.tab,
  (newTab) => {
    if (typeof newTab === 'string' && tabs.some(tab => tab.id === newTab)) {
      activeTab.value = newTab
    }
  }
)

// 生命周期钩子
onMounted(() => {
  handleRouteParams()
})
</script>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>